<template>
  <el-card class="box-card">
    <div><el-button :icon="Plus" type="primary" @click="addBrand">添加品牌</el-button></div>
    <div class="tableContent">
      <el-table v-loading="isLoading" :data="tableData" border stripe>
        <el-table-column type="index" width="55" align="center" label="序号" />
        <el-table-column prop="name" label="商品名称" align="center" show-overflow-tooltip />
        <el-table-column label="品牌LOGO" align="center">
          <template #default="scope">
            <img :src="scope.row.date" alt="无图片">
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="品牌操作" align="center" width="200">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleUpdate(scope.row)">
              修改
            </el-button>
            <el-popconfirm 
              @confirm="handDeleteRow(scope.row)"
              @cancel="cancelEvent"
              title="你确认要删除吗?">
              <template #reference>
                <el-button link type="danger" size="small" @click.prevent="">
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="demo-pagination-block">
      <el-pagination 
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :background="true" 
        :total="total"
        layout=" prev, pager, next, jumper,->,total, sizes" 
        @size-change="handleSizeChange" 
        @current-change="handleCurrentChange" />
    </div>
  </el-card>
 <dialogForm ref="dialogFormRef" :dialogTitle="dialogTitle"></dialogForm>
</template>
<script lang="ts" setup>
import { Plus } from "@element-plus/icons-vue";
import { ref, onMounted } from 'vue';
import { brandList, brandDeteleList } from "../../../api/product/brand";
import { Records } from "../../../api/product/brand/type";
import dialogForm from "./components/dialogForm.vue";
import { ElMessage } from "element-plus"

onMounted(() => {
  initData()
})
const dialogFormRef:any = ref()
const isLoading = ref(false)
const tableData = ref<Records>([
  {
    logoUrl: '2016-05-03',
    name: 'Tom',
  },
  {
    logoUrl: '2016-20-03',
    name: 'fd',
  },
])
let currentPage = ref(1);
let pageSize = ref(10);
let total = ref(0);
const dialogTitle:any = ref("")

//请求列表
const initData = async () => {
  let params = {
    pageSize: pageSize.value,
    currentPage: currentPage.value
  }
  const data = (await brandList(params)) as any;
  if (data.code == 200) {
    tableData.value = data.records;
    total.value = data.total;
  }
}
// 分页
const handleSizeChange = (val: number) => {
  pageSize.value = val;
};
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
};
//添加品牌
const addBrand = ()=>{
  dialogFormRef.value.dialogVisible = true;
  dialogTitle.value = "添加品牌"
}
//表格编辑
const handleUpdate = (row: any) => {
  dialogFormRef.value.receiveData(row);
  dialogTitle.value = "修改品牌"
  dialogFormRef.value.dialogVisible = true;

}
//品牌取消删除
const cancelEvent = ()=>{
  ElMessage({
      message: '取消删除',
      type: 'warning'
    })
}
//品牌删除
const handDeleteRow = async(row: any) => {
  console.log(row, '删除')
  let data = (await brandDeteleList(row.id)) as any;
  if(data.code == 200) {
    ElMessage({
      message: '删除成功',
      type: 'success'
    })
    initData();
    // initData(tableData.value.length > 1 ? currentPage.value : currentPage.value - 1 );
  }
}
</script>
<style lang="less">
.box-card {
  min-height: 400px;
}
.tableContent {
  margin: 10px 0;
}
</style>